<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_1291028_inx3dz3wwt.css">
</head>
<body>
    <div class="top">
    </div>
    <div class="main">
        <div class="main-left">
            <i class="location iconfont">&#xe604;</i>
            <span>深圳</span>
            <span>&lt切换&gt</span>
        </div>
        <div class="main-center">
            <a href="#">首页</a>
            <a href="#">咨询</a>
            <a href="#">测评</a>
            <a href="#">商城</a>
        </div>
        <div class="main-right">
            <i class="location iconfont">&#xe601;</i>
            <span>个人中心</span>
        </div>

    </div>
    <div class="wrap">
       <div class="nav">
           <p>首页</p>
           <p>&gt;</p>
           <p>预防装修污染</p>
           <p>&gt;</p>
           <p>材料库</p>
       </div> 
       <div class="menu">
            <ul class="row">
                <li><a href="#">类别</a></li>
                <li><a href="#">全部</a></li>
                <li><a href="#">地板</a></li>
                <li><a href="#">涂料</a></li>
                <li><a href="#">墙纸</a></li>
                <li><a href="#">瓷砖</a></li>
                <li><a href="#">粘胶剂</a></li>
                <li><a href="#">油漆</a></li>
                <li><a href="#">家具</a></li>
                <li><a href="#">板材</a></li>
                <li><a href="#">饰品</a></li>
                <li class="location iconfont"><a href="#">&#xe602;</a></li>
                
            </ul>
            <ul class="row">
                <li><a href="#">类型</a></li>
                <li><a href="#">全部</a></li>
            </ul>
            <ul class="row">
                <li><a href="#">材质</a></li>
                <li><a href="#">全部</a></li>
                <li><a href="#">实木</a></li>
                <li><a href="#">复合</a></li>
                <li><a href="#">强化</a></li>
                <li><a href="#">其他</a></li>
            </ul>
            <ul class="row">
                <li><a href="#">品牌</a></li>
                <li><a href="#">全部</a></li>
                <li><a href="#">圣象</a></li>
                <li><a href="#">大自然</a></li>
                <li><a href="#">生活家</a></li>
                <li><a href="#">北美风情</a></li>
                <li><a href="#">德尔</a></li>
                <li><a href="#">博典</a></li>
                <li><a href="#">船王</a></li>
            </ul>
       </div>
       <div class="search">
           <div class="search-left">
               <span>发布时间</span>
               <i class="iconfont">&#xe609;</i>
               <span>价格</span>
               <i class="iconfont">&#xe7cf;</i>
               <span>环保节能</span>
               <i class="iconfont">&#xe7cf;</i>
            </div>
           <div class="search-center">
               <input type="text" >
               <button class="iconfont">&#xe611;<span>搜索</span></button>
           </div>
           <div class="search-right">
               <i class="iconfont">&#xe62a;</i>
               <span>了解家居医生建材环保评级标准</span>
           </div>
       </div>
       <div class="container">
           <div class="one">
               <div class="content">
                    <img src="images/data_image.png" alt="">
                    <p>德尔 都市系列3001</p>
                    <p>木地板 - 复合地板</p>
                    <p>单价：128/m2</p>
                    <h4>环保评级：B (可以使用)</h4>
               </div>
           </div>
           <div class="one">
               <div class="content">
                    <img src="images/data_image.png" alt="">
                    <p>德尔 都市系列3001</p>
                    <p>木地板 - 复合地板</p>
                    <p>单价：128/m2</p>
                    <h4>环保评级：B (可以使用)</h4>
               </div>
           </div>
           <div class="one">
               <div class="content">
                    <img src="images/data_image.png" alt="">
                    <p>德尔 都市系列3001</p>
                    <p>木地板 - 复合地板</p>
                    <p>单价：128/m2</p>
                    <h4>环保评级：B (可以使用)</h4>
               </div>
           </div>
           <div>
               <div class="content">
                    <img src="images/data_image.png" alt="">
                    <p>德尔 都市系列3001</p>
                    <p>木地板 - 复合地板</p>
                    <p>单价：128/m2</p>
                    <h4>环保评级：B (可以使用)</h4>
               </div>
            </div>
            <div class="one">
                <div class="content">
                  <img src="images/data_image.png" alt="">
                    <p>德尔 都市系列3001</p>
                    <p>木地板 - 复合地板</p>
                    <p>单价：128/m2</p>
                    <h4>环保评级：B (可以使用)</h4>
                </div>
            </div>
            <div class="one">
                <div class="content">
                    <img src="images/data_image.png" alt="">
                    <p>德尔 都市系列3001</p>
                    <p>木地板 - 复合地板</p>
                    <p>单价：128/m2</p>
                    <h4>环保评级：B (可以使用)</h4>
                </div>
            </div>
            <div class="one">
                <div class="content">
                    <img src="images/data_image.png" alt="">
                    <p>德尔 都市系列3001</p>
                    <p>木地板 - 复合地板</p>
                    <p>单价：128/m2</p>
                    <h4>环保评级：B (可以使用)</h4>
                </div>
            </div>
            <div>
                <div class="content">
                    <img src="images/data_image.png" alt="">
                    <p>德尔 都市系列3001</p>
                    <p>木地板 - 复合地板</p>
                    <p>单价：128/m2</p>
                    <h4>环保评级：B (可以使用)</h4>
                </div>
            </div>
       </div>
       <div class="link">
         <button>上一页</button>
         <a href="#">1</a>
         <a href="#">2</a>
         <a href="#">3</a>
         <a href="#">4</a>
         <a href="#">5</a>
         <button>下一页</button> 
         <span>共有10页，去第&nbsp;&nbsp;<input type="text">&nbsp;&nbsp;页</span>
         <button class="submit">确定</button>
       </div>
       <div class="massage">
           <div class="wx">
               <img src="images/small_weixin.png" alt="">
          </div>
          <div class="text">
                <h3>建材检测 需求反馈</h3>
                <p>亲爱的用户，我们正在不断的完善和更新建材库，</p>
                <p>若没有找到您想要的材料信息，请将您想测的建材告诉我们。</p>
            </div>
       </div>
    </div>
    <div class="bottom">
            <div class="home">
               <img src="images/footerLogo.png" alt="">
            </div>
            <div class="wenben">
                <h5>为室内环境健康把好每一关</h5>
                <p>家居医生致力于中国人的家居健康问题,通过专业的技术研究</p>
                <p>和测评，倾力协助大众打造绿色、环保的人居生活环境</p>
            </div>
            <div class="tips">
                <a href="#">关于我们</a>
                <a href="#">联系我们</a>
                <a href="#">加入我们</a>
            </div>
            <div class="tipa">
                <a href="#">版权说明</a>
                <a href="#">用户隐私</a>
                <a href="#">免费申明</a>
            </div>
            <div class="tipb">
                <p> <img src="images/weixin2.png" alt=""></p>
                <p> <img src="images/tianmao.png" alt=""></p>
                <p> <img src="images/shop.png" alt=""></p>
            </div>
           <div class="tipc">
                <a href="#">官方微信</a>
                <a href="#">天猫旗舰店</a>
                <a href="#">有赞商城</a>
           </div>
           <hr class="line"></hr>
           <div class="foot">
               <span class="foot-left">深圳建筑科学研究院股份有限公司&nbsp;&nbsp;&nbsp;家居医生网</span>
               <span class="foot-right">粤ICP备08011321号&nbsp;Copyright&nbsp;All&nbsp;Rights&nbsp;Reserved</span>
           </div>
    </div>
</body>
</html>